{% extends 'base.html' %}

{% block head %}
{# This part is awful! Someone please suggest something better... #}
{% for object in objects.object_list %}
<script type="text/javascript">
<!--
$(document).ready(function(){
    $("#{{ object.name }}_toggle_link").click(function () {
     $("#{{ object.name }}").slideToggle("slow");
   });
});
//-->
</script>
<style type="text/css">
.{{ object.name }} { display: none;  text-align: left; }
.{{ object.name }}_toggle_link { cursor: pointer; }
</style>
{% endfor %}
<script type="text/javascript">
<!--
function toggleSign(element) {
element_current = document.getElementById(element).innerHTML;
if (element_current == "+")
	{
	document.getElementById(element).innerHTML = "-"
	}
else
	{
	document.getElementById(element).innerHTML = "+"
	}
}
//-->
</script>
{% endblock head %}

{% block title %}Viewing the {{ category.title }} category{% endblock title %}

{% block header %}
<a href="?view={{ current.view }}&amp;{% include 'views.include.html' %}" ><img height="48" style="vertical-align: middle; float: left !important;" src="{{ site.icon }}" alt="Go back to the home page" /></a>
<a href="?view={{ current.view }}&amp;category={{ category.name }}&amp;{% include 'views.include.html' %}" ><img width="48" style="vertical-align: middle;" src="{{ category.icon }}" alt="{{ category.title }} category icon" /></a>
 {{ category.title }}
{% endblock header %}

{% block content %}
{{ category.long_description|safe }}
<p />
<a style="cursor: pointer;" onclick="history.go(-1)"><img src="{{ site.httppath }}/Data/images/back.png" alt="Back"/></a>
<a href="?category={{ category.name }}&amp;view=grid&amp;{% include 'views.include.html' %}"> 
<img src="{{ site.httppath }}/Data/images/grid.png" alt="Switch to grid view!"/></a>
</div>
<p />
{% include 'page_numbers.html' %}
<table class="table" width="80%" cellpadding="0" cellspacing="0" align="center">
<tbody>

{% for object in objects.object_list %}
<tr>
<td width="1%"><a onclick="toggleSign('{{ object.name }}_toggle_link')" id="{{ object.name }}_toggle_link" class="{{ object.name }}_toggle_link">+</a></td>
<td><b><a href="?category={{ category.name }}&amp;object={{ object.name }}&amp;view={{ current.view }}&amp;{% include 'views.include.html' %}&amp;page={{ current.page }}">{{ object.title }}</a></b></td>
<td><a href="?category={{ category.name }}&amp;object={{ object.name }}&amp;view={{ current.view }}&amp;{% include 'views.include.html' %}&amp;page=1">{{ object.short_description|truncatewords:10 }}</a></td>
</tr>
<tr style="background: none !important;">
<td colspan="3" style="padding: 0px !important;">
<div id="{{ object.name }}" class="{{ object.name }}">
<!--Preview Box-->
{% block preview %}
<table class="table" cellpadding="0" cellspacing="0">
<tr>
<th>{{ title }} Preview</th>
</tr>
<tr style="background: none !important;">
<td colspan="2"><a href="?category={{ category.name }}&amp;object={{ object.name }}&amp;view={{ current.view }}&amp;{% include 'views.include.html' %}&amp;page={{ current.page }}"><img src="{{ object.preview }}" alt="{{ object.title }} preview"></img></a></td>
</tr>
</table>
{% endblock preview %}
<!--End Preview-->
</div>
</td>
</tr>
{% endfor %}

</tbody>
</table>
{% endblock content %}
